<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1716040613-史兵舰</title>
    <link rel="shortcut icon" href="favicon.ico" />
    <!-- 导入去除标签自带样式 -->
    <link rel="stylesheet" href="./css/base.css">
    <!-- 导入样式 -->
    <link rel="stylesheet" href="./css/index.css">
    <!-- 导入js -->
    <script src="./js/index.js"></script>
</head>
<body>
    <!-- 侧边栏 -->
    <div class="sidebar">
        <div class="sid">
            <img src="./images/shouji1.png" class="hei">  
            <img src="./images/shouji2.png" class="hong">  
            <p>手机APP</p>          
        </div>
        <div class="sid">
            <img src="./images/ren1.png" class="hei">  
            <img src="./images/ren2.png" class="hong">  
            <p>个人中心</p>          
        </div>
        <div class="sid">
            <img src="./images/kefu2.png" class="hei">  
            <img src="./images/kefu1.png" class="hong">  
            <p>人工客服</p>          
        </div>
        <div class="sid">
            <img src="./images/car1.png" class="hei">  
            <img src="./images/car2.png" class="hong">  
            <p>&nbsp;&nbsp;&nbsp;购物车</p>          
        </div>
    </div>    
    <!-- 快速导航栏 -->
    <div class="shortcut">
        <div class="shoercut-nav w">
                <ul>
                    <li><a href="#">小米商城</a></li>
                    <li>|</li>
                    <li><a href="#">MUI</a></li>
                    <li>|</li>
                    <li><a href="#">米聊</a></li>
                    <li>|</li>
                    <li><a href="#">游戏</a></li>
                    <li>|</li>
                    <li><a href="#">云服务</a></li>
                    <li>|</li>
                    <li><a href="#">金融</a></li>
                    <li>|</li>
                    <li><a href="#">问题反馈</a></li>
                </ul>
                <span><a href="#">购物车</a></span>
                <ul>
                    <li><a href="login.html">登录</a></li>
                    <li>|</li>
                    <li><a href="register.html">注册</a></li>
                    <li>|</li>
                    <li><a href="#">消息通知</a></li>
                </ul>
                
                
        </div>
    </div>
    <!-- 导航栏 + 搜索框 -->
    <div class="container w">
        <div class="logo-top">
            <a href="#"><img src="./images/logo_top.png" alt=""></a>
        </div>
        <div class="yiyuan">
            <a href="#"><img src="./images/yyymix.gif" alt=""></a>
        </div>
        <ul>
            <li><a href="#">小米手机</a></li>
            <li><a href="#">红米手机</a></li>
            <li><a href="#">智能电视</a></li>
            <li><a href="#">笔记本</a></li>
            <li><a href="#">智能家电</a></li>
            <li><a href="#">路由器</a></li>
            <li><a href="#">智能硬件</a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">社区</a></li>
        </ul>
        <div class="header-search">
            <input type="text" placeholder="小米9 小米MIX现货" >
            <button>搜索</button>
        </div>
    </div>
    <!-- 分类列表内容 -->
    <div class="type w">
        <!-- 轮播图片 -->
        <ul class="lunbotu">
            <li><a href="#"><img src="./images/listbanner01.jpg" id="lun"></a></li>
            <li><a href="#"><img src="./images/listbanner02.jpg" id="lun"></a></li>
            <li><a href="#"><img src="./images/listbanner03.jpg" id="lun"></a></li>
            <li><a href="#"><img src="./images/listbanner04.jpg" id="lun"></a></li>            
            <li><a href="#"><img src="./images/listbanner05.jpg" id="lun"></a></li>
        </ul>
        <!-- 小圆点 -->
        <ul class="promo-nav">
            <!-- <li></li>
            <li></li>
            <li class="selected" ></li>
            <li></li>
            <li></li> -->
        </ul>
        <!-- 左侧按钮 -->
        <div class="button-prev"></div>
        <!-- 右侧按钮 -->
        <div class="button-next"></div>
        <!-- 类别 -->
        <ul class="type-info">
            <li><a href="#">手机</a>&nbsp; &nbsp;<a href="#">电话卡</a> </li>
            <li><a href="#">笔记本</a>&nbsp; &nbsp;<a href="#">平板</a> </li>
            <li><a href="#">电视</a>&nbsp; &nbsp;<a href="#">盒子</a> </li>
            <li><a href="#">路由器</a>&nbsp; &nbsp;<a href="#">智能硬件</a> </li>
            <li><a href="#">移动电源</a>&nbsp; &nbsp;<a href="#">电池</a> &nbsp; &nbsp;<a href="#">插线板</a></li>
            <li><a href="#">耳机</a>&nbsp; &nbsp;<a href="#">音箱</a> </li>
            <li><a href="#">保护套</a>&nbsp; &nbsp;<a href="#">贴膜</a> </li>
            <li><a href="#">线材</a>&nbsp; &nbsp;<a href="#">支架</a> &nbsp; &nbsp;<a href="#">储存卡</a></li>
            <li><a href="#">箱包</a>&nbsp; &nbsp;<a href="#">服饰</a> &nbsp; &nbsp;<a href="#">鞋</a> &nbsp; &nbsp;<a href="#">眼镜</a></li>
            <li><a href="#">米兔</a>&nbsp; &nbsp;<a href="#">生活周边</a> </li>
        </ul>
        <!-- 分类详情 -->
        <div class="details">
            <ul>
                <li>
                    <a href="#"><img src="./images/xiao/xiao (1).jpg" alt=""><span>小米MIX2s</span></a>                    
                </li>
                <li>
                    <a href="#"><img src="./images/xiao/xiao (2).jpg" alt=""><span>小米MIX2s</span></a>
                </li>
                <li>
                    <a href="#"><img src="./images/xiao/xiao (3).jpg" alt=""><span>小米MIX2s</span></a>
                </li>
                <li>
                    <a href="#"><img src="./images/xiao/xiao (4).jpg" alt=""><span>小米MIX2s</span></a>
                </li>
                <li>
                    <a href="#"><img src="./images/xiao/xiao (5).jpg" alt=""><span>小米MIX2S</span></a>
                </li>
                <li>
                    <a href="#"><img src="./images/xiao/xiao (6).jpg" alt=""><span>小米MIX2S</span></a>
                </li>
                <li>
                    <a href="#"><img src="./images/xiao/xiao (7).jpg" alt=""><span>小米MIX2S</span></a>
                </li>
                <li>
                    <a href="#"><img src="./images/xiao/xiao (8).jpg" alt=""><span>小米MIX2S</span></a>
                </li>
                <li>
                    <a href="#"><img src="./images/xiao/xiao (9).jpg" alt=""><span>小米MIX2S</span></a>
                </li>
                <li>
                    <a href="#"><img src="./images/xiao/xiao (1).png" alt=""><span>小米MIX2S</span></a>
                </li>
                <li>
                    <a href="#"><img src="./images/xiao/xiao (2).png" alt=""><span>小米MIX2S</span></a>
                </li>
                <li>
                    <a href="#"><img src="./images/xiao/xiao (3).png" alt=""><span>小米MIX2S</span></a>
                </li>
                <li>
                    <a href="#"><img src="./images/xiao/xiao (4).png" alt=""><span>小米MIX2S</span></a>
                </li>
                <li>
                    <a href="#"><img src="./images/xiao/xiao (5).png" alt=""><span>小米MIX2S</span></a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 左侧导航 + 单品图片推荐 -->
    <div class="home-hero-sub w">
        <div class="home-channel-list">
            <ul>
                <li><a href="#"><img src="./images/hjh_01.gif" alt=""></a></li>
                <li><a href="#"><img src="./images/hjh_02.gif" alt=""></a></li>
                <li><a href="#"><img src="./images/hjh_03.gif" alt=""></a></li>
                <li><a href="#"><img src="./images/hjh_04.gif" alt=""></a></li>
                <li><a href="#"><img src="./images/hjh_05.gif" alt=""></a></li>
                <li><a href="#"><img src="./images/hjh_06.gif" alt=""></a></li>
            </ul>
        </div>
        <ul>
            <li><a href="#"><img src="./images/ban1.jpg" alt=""></a></li>
            <li><a href="#"><img src="./images/ban2.jpg" alt=""></a></li>
            <li><a href="#"><img src="./images/ban3.jpg" alt=""></a></li>
        </ul>
    </div>
    <!-- 图片横条 -->
    <div class="home-banner-box w">
        <a href="#"><img src="./images/banner01.jpg" alt=""></a>
    </div>
    <!-- 文字标题 -->
    <div class="title w">
        <h3>明星单品</h3>
    </div>
    <!-- 明星单品 -->
    <div class="row w">
        <ul>
            <li>
                <a href="info.html">
                    <img src="./images/pinpai6.png" alt="">
                    <h4>小米9</h4>
                    <h6>7月9日-21日享花呗12期分期免息</h6>
                    <span>2999元起</span>
                </a>
            </li>
            <li>
                <a href="info.html">
                    <img src="./images/pinpai7.png" alt="">
                    <h4>小米CC9</h4>
                    <h6>8月9日-10日，下单立减200元</h6>
                    <span>1999元起</span>
                </a>
            </li>
            <li>
                <a href="info.html">
                    <img src="./images/pinpai8.png" alt="">
                    <h4>小米MIX3</h4>
                    <h6>10月9日-10日，下单立减100元</h6>
                    <span>2999元起</span>
                </a>
            </li>
            <li>
                <a href="info.html">
                    <img src="./images/pinpai9.png" alt="">
                    <h4>小米壁画电视65英寸</h4>
                    <h6>7月9日，下单立减200元</h6>
                    <span>6999元起</span>
                </a>
            </li>
            <li>
                <a href="info.html">
                    <img src="./images/pinpai10.png" alt="">
                    <h4>小米游戏本</h4>
                    <h6>第八代酷睿处理器,双烤不限频不降频</h6>
                    <span>3599元起</span>
                </a>
            </li>
        </ul>
    </div>
    <!-- 图片横条 2 -->
    <div class="home-banner-box w">
        <a href="#"><img src="./images/banner02.jpg" alt=""></a>
    </div>
    <!-- 文字标题 2-->
    <div class="title w">
        <h3>热门配件</h3>
    </div>
    <!-- 热门配件 -->
    <div class="box-bd w">
        <!-- 左 -->
        <div class="box-bd-list">
            <div class="box-bd-list1">
                <a href="#"><img src="./images/peijian1.jpg" alt=""></a>
            </div>
            <div class="box-bd-list2">
                <a href="#"><img src="./images/peijian6.png" alt=""></a>
            </div>
        </div>
        <!-- 右 -->
        <ul>
            <li>
                <a href="#">
                    <img src="./images/peijian11.jpg" alt="">
                    <h4>小米无限车充</h4>
                    <h5>169元</h5>
                    <h6>1372人评价</h6>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/peijian3.jpg" alt="">
                    <h4>小米手机4c 小米4c 智能</h4>
                    <h5>29元</h5>
                    <h6>372人评价</h6>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/peijian4.jpg" alt="">
                    <h4>红米NOTE 4x 红米note4X</h4>
                    <h5>19元</h5>
                    <h6>372人评价</h6>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/peijian5.jpg" alt="">
                    <h4>小米支架式自拍杆</h4>
                    <h5>89元</h5>
                    <h6>372人评价</h6>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/peijian3.jpg" alt="">
                    <h4>九号平衡车</h4>
                    <h5>3999元</h5>
                    <h6>372人评价</h6>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/peijian8.jpg" alt="">
                    <h4>米家随身风扇</h4>
                    <h5>19.9元</h5>
                    <h6>372人评价</h6>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/peijian9.jpg" alt="">
                    <h4>红米4X高透软胶保护套</h4>
                    <h5>29元</h5>
                    <h6>372人评价</h6>
                </a>
            </li>
            <li>
                <img class="pic1" src="./images/hongmin4.png" alt="">
                <img class="pic2" src="./images/liulangengduo.png" alt="">
            </li>
        </ul>
    </div>
    <!-- 底部 -->
    <div class="footer">
            <div class="footer-info w">
                <ul>
                    <li><a href="#">小米商城</a></li>
                    <li>|</li>
                    <li><a href="#">小米网盟</a></li>
                    <li>|</li>
                    <li><a href="#">小米移动</a></li>
                    <li>|</li>
                    <li><a href="#">隐私政策</a></li>
                </ul>
            </div>
    </div>
    <div class="footer-bd">
        <span>史兵舰 @ 版权所有 2020</span>
    </div>
</body>
</html>